<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    
	<style>
	.error {
		color: #ff0000;
	}
	.errorblock{
		color: #000;
		background-color: #ffEEEE;
		border: 3px solid #ff0000;
		padding:8px;
		margin:16px;
	}

	</style>    
    
    <script>
    function submitAction(executeValue){
    	form.execute.value=executeValue;
    	form.submit();
    }
    </script>
</head>
<body>

<z:page>
<br/><br/>

<z:window border="none">

    <z:style src="/css/zzz.dsp"/>

	<z:zscript>
	void doSave(){	   
	   Messagebox.show("確定要存檔?", "確認", Messagebox.YES | Messagebox.NO, Messagebox.QUESTION, new EventListener() {
	       public void onEvent(Event evt) { 
	           switch (((Integer)evt.getData()).intValue()) { 
	               case Messagebox.YES : doSubmit("save");break;
	           }
	       }
	   }); 
	   
	}
	
	void doSubmit(String executeValue){
	    Clients.evalJavaScript("form.execute.value='"+executeValue+"';");
	    Clients.showBusy("處理中，請稍候...", true);
	    Clients.submitForm("form");
	}
	
	void doDelete(String deleteId, String executeValue){
	    Clients.evalJavaScript("form.deleteId.value='"+deleteId+"';");
	    doSubmit( executeValue );
	}
	</z:zscript>

<form:form method="POST" commandName="employeeModel" id="form" name="form">

    <input type="hidden" id="execute" name="execute" value="">
    <input type="hidden" id="deleteId" name="deleteId" value="">

    <form:errors path="*" cssClass="errorblock" element="div"/>
    
        
    
        <z:hbox>
	        <z:button id="newBtn" label="新增" onClick='doSubmit("add")'/>
	        <z:button id="saveBtn" label="儲存" onClick='doSave()'/>        
	        <z:button id="testBtn" label="測試" onClick='doSubmit("test")'/>
        </z:hbox>
    
    
    <div>

        <z:grid id="grid" mold="paging" pageSize="10">
            <z:columns menupopup="auto" sizable="true">
				<z:column label="#" align="center" width="30px"/>
				<z:column label="Name" align="center" sort="auto"/>
				<z:column label="Employee No" align="center" sort="auto"/>
				<z:column label="Department" align="center" sort="auto"/>
				<z:column label="Sex" align="center" sort="auto"/>
				<z:column label="Birthday" align="center" sort="auto"/>
				<z:column label="Address" align="center" sort="auto"/>
				<z:column label="Zip" align="center" sort="auto"/>
				<z:column label="Create Date" align="center" sort="auto"/>
				<z:column label="Delete" align="center" sort="auto"/>
		    </z:columns>   
		    <z:rows>
		        <c:forEach var="employee" items="${employeeModel.employees}" varStatus="s">
		            <z:row>
		                
		                <z:label value="${s.index+1}"/>
		                
                        <spring:bind path="employeeModel.employees[${s.index}].empNo">                            
                            <z:textbox id="${status.expression}" name="${status.expression}" value="${status.value}"/>
                        </spring:bind>
                        
                        <spring:bind path="employeeModel.employees[${s.index}].name">                            
                            <z:textbox id="${status.expression}" name="${status.expression}" value="${status.value}" />
                        </spring:bind> 
                        
                        <spring:bind path="employeeModel.employees[${s.index}].deptNo">
                            <z:listbox id="${status.expression}" name="${status.expression}" rows="1" mold="select">
                                <c:forEach items="${deptSelectList}" var="entry">
                                    <z:listitem label="${entry}" value="${entry}" selected="${status.value eq entry}"/>
                                </c:forEach>
                            </z:listbox>
                        </spring:bind>
                        
                        <spring:bind path="employeeModel.employees[${s.index}].sex">
                            <z:listbox id="${status.expression}" name="${status.expression}" rows="1" mold="select">
                                <c:forEach items="${sexSelectMap}" var="entry">
                                    <z:listitem label="${entry.value}" value="${entry.key}" selected="${status.value eq entry.key}"/>
                                </c:forEach>
                            </z:listbox>
                        </spring:bind>
                        
                        <spring:bind path="employeeModel.employees[${s.index}].birthday"> 
                            <z:datebox id="${status.expression}" name="${status.expression}" 
                                       text="${status.value}" 
                                       readonly="true" format="yyyy/MM/dd" cols="12"/> 
                        </spring:bind>
                        
                        <spring:bind path="employeeModel.employees[${s.index}].address">                            
                            <z:textbox id="${status.expression}" name="${status.expression}" value="${status.value}" width="120px"/>
                        </spring:bind> 
                        
                        <spring:bind path="employeeModel.employees[${s.index}].zip">                         
                            <z:textbox id="${status.expression}" name="${status.expression}" value="${status.value}" constraint="/^[0-9]+$/: Please enter a number"/>
                        </spring:bind>
                        
                        <fmt:formatDate value="${employee.createDate}" pattern="yyyy/MM/dd"/>
                        
                        <z:button id="deleteBtn_${s.index}" label="刪除" onClick='doDelete("${s.index}","delete")'/>
                                                                         
		            </z:row>
		        </c:forEach>
		    </z:rows>        
        </z:grid>
    </div>
     
</form:form>
</z:window> 

</z:page>

</body>
</html>